<template>
    <div class="page-wrapper" style="height:480px; background:#fff;">
        <div class="page-content">
            <div style="display:flex; align-items:flex-start; justify-content: space-between; margin:76px 0; ">
                <img :src="MiniLogo" />
                <div style="width:950px; font-size:24px; line-height:36px; color:#525866; ">
                    iFMCS厂务云平台,为企业提供一站式数字化解决方案，集成能源、安防、环境、运维等模块，通过物联网、云服务、大数据、AI人工智能等最新技术，以数据驱动与AI辅助决策，打造全面数字化平台，达到为企业降本增效、省钱、省心、省事为目的
                </div>
            </div>
            <div class="unfold-container">
                <div
                    v-for="( item, index) in data"
                    :key="item.title"
                    class="unfold-item"
                    :style="{ left: `${index * 16.6}%` }"
                >
                    <div class="unfold-item-icon">
                        <img :src="item.img" />
                        <div class="unfold-item-text">{{  item.title }}</div>
                    </div>
                    <div class="unfold-item-hide">
                        <div style="font-size:24px; color:#fff; margin:6px 0;">{{  item.title }}</div> 
                        <div style="color:#fff; line-height:24px; ">{{  item.content }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { watch, ref } from 'vue';
    import MiniLogo from '../../../public/mini-logo.png';
    import Icon1 from '../../../public/unfold-icon-1.png';
    import Icon2 from '../../../public/unfold-icon-2.png';
    import Icon3 from '../../../public/unfold-icon-3.png';
    import Icon4 from '../../../public/unfold-icon-4.png';
    import Icon5 from '../../../public/unfold-icon-5.png';
    import Icon6 from '../../../public/unfold-icon-6.png';

    const data = [
        { title:'统一接口', img:Icon1, content:'真正做到 All in 1，1个账号协同所有厂务场景应用、整合工单和信息流,避免信息孤岛,提升用户数字化体验。' },
        { title:'开放架构', img:Icon2, content:'提供开放协议，与各行各业优秀的解决方案商合作，提供更加完善的解决方案;平台提供了标准API，可与企业MES/ERP/SCADA等系统实现数据交互协同。'  },
        { title:'产品成熟', img:Icon3, content:'我们的产品已经经过大量(200+个项目的用户使用与改进，值得信赖。' },
        { title:'交付灵活', img:Icon4, content:'实现了应用独立交付，可灵活抵达不同用户，不同场景和时段的需求，应用灵活配置。' },
        { title:'场景集成', img:Icon5, content:'产品实现了50+种物联网终端的通讯集成，可以快速交付项目;平台集成了多个场景应用产品，可通过智能控制算法和集控系统，可对空调、空压、配电、储能等场景 进行 Al集 控 调优，节能降本，提供经济价值。' },
        { title:'融合创新', img:Icon6, content:'在应用中积累了大量的项目经验，构建模型库(物模型、用能场景模型等)，结合平台AI算法开展业务提升用户体验和项目价值(Chat+Prompt Engineering+Function Calling+RAG), 用 AI的 RAG做知识库等。' }
    ];
</script>
<style scoped>
    .unfold-container {
        position:relative;
        height:200px;
    }
    .unfold-item {
        width:16.6%;
        height:100%;
        position:absolute;
        display:flex;
        align-items: center;
        justify-content: center;
        z-index:1;
        padding:0 32px;
    }
    .unfold-item:hover {
        width:33.3%;
        z-index:10;
        border-radius:8px;
        background-image:linear-gradient(to Right, #3666ff 20%, #409eff);
    }
    .unfold-item:last-child:hover {
        left:unset !important;
        right:0;
        flex-direction: row-reverse;
    }
    .unfold-item-hide {
        display:none;
    }
    .unfold-item-icon {
        text-align:center;
    }
    .unfold-item-text {
        font-size:24px; 
        color:#525866; 
    }
    .unfold-item:hover .unfold-item-hide {
        display:block;
    }
    .unfold-item:hover .unfold-item-text {
        display:none;
    }
</style>